$(document).ready(function() {
    $('#gridA').on('click', '.seeImage', verImagen );
    dataSource = new kendo.data.DataSource({
        transport: {
            create: {
                url: appBosch.crud.create,
                dataType: "json"
            },
            read: {
                url: appBosch.crud.read + '/' + appBosch.question_id,
                dataType: "json"
            },
            update: {
                url: appBosch.crud.update,
                dataType: "json"
            },
            destroy: {
                url: appBosch.crud.destroy,
                dataType: "json"
            },
            parameterMap: function(options, operation) {
                var params = {};
                switch (operation)
                {
                    case 'create':
                        params = {models: kendo.stringify(options.models)};
                    case 'read':
                        break;
                    case 'update':
                        params = {models: kendo.stringify(options.models)};
                        break;
                    case 'destroy':
                        params = {id: options.models[0].value};
                }
                return params;
            }
        },
        batch: true,
        schema: {
            model: {
                id: "value",
                fields: {
                    text: {
                        editable: true,
                        nullable: false,
                        validation: {
                            required: true,
                            min: 1
                        }
                    },
                    img: {
                        type: "string",
                        editable: true,
                        nullable: true
                    },
                    ok: {
                        type: "boolean",
                        editable: true,
                        nullable: false
                    },
                    src_id: {
                        defaultValue: appBosch.question_id
                    }
                }
            }
        }
    });

    $("#grid").kendoGrid({
        scrollable: true,
        filterable: true,
        selectable: true,
        navigatable: true,
        resizable: true,
        columnMenu: true,
        dataSource: dataSource,
        toolbar: [{name: "create", text: "Agregar respuesta"}],
        columns: [
            {field: "text", title: "Respuesta" },
            {
                field: "img", 
                title: "Imagen", 
                editor: imgEditorA,
                template: "#if(img !== null && img !== undefined && img !== ''){# <i class='fa fa-check'></i> <input class='seeImage k-button k-button-icontext' value='Ver imagen' /> #}#", 
                width: 300
            },
            {
                field: "ok", 
                title: "Es correcta",
                template: kendo.template($("#templateOk").html())
            },
            {command: [
                    {
                        name: "edit",
                        text: {
                            edit: "",
                            update: "",
                            cancel: ""
                        }
                    },
                    {
                        name: "destroy",
                        text: ""
                    }], title: "&nbsp;"}],
        editable: {
            confirmation: "¿Estas seguro que deseas eliminar esta respuesta?",
            mode: "inline"
        },
        cancel: function(e) {
            $.post(appBosch.cancel);
        }
    });
});

function imgEditorA(container, options) {
    var input = $("<input type='file' id='image' />");
    input.attr("name", options.field);
    input.appendTo(container);
    input.kendoUpload({
        async: {
            saveUrl: appBosch.upload
        },
        localization: {
            select: "Seleccionar...",
            headerStatusUploaded: "",
            headerStatusUploading: "",
            statusUploaded: "",
            statusUploading: ""
        },
        complete: function (e) {
            options.model.set('img', 'Ok');
        },
        multiple: false
    });
}

function verImagen (e) {
    var dataItem = $(e.currentTarget).closest("tr");
    dataItem = dataSource.getByUid(dataItem.data('uid'));
    
    $("<div><img src='" + dataItem.img + "?" + Math.floor((Math.random() * 10) + 1).toString() + "' width='1000px' /></div>").kendoWindow({
        width: "1000px",
        title: "Imagen",
        actions: [
            "Close"
        ]
    }).data("kendoWindow").open().center();
}